<template>
  <div class="base-page">
    <!-- <CommonCustomNavHead title="健康文章" prePage="/pages/index/main" :pageOffsetTop="pageOffsetTop" /> -->
    <div class="list-wrap">
      <!-- <input 
        class="input" 
        placeholder="请输入关键字" 
        v-model="search"
      /> -->
      <div class="list-box">
        <div class="list-item" v-for="item in dataList" :key="item.article_id">
          <Card
            :articleId="item.article_id"
            :title="item.content.news_item[0].title"
            :content="item.content.news_item[0].content"
            :image="item.content.news_item[0].thumb_url"
            :time="fmtTimeStamp(item.update_time)"
            :search="search"
            :token="token"
          ></Card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Card from '@/components/card/index.vue'
import { articleList } from '@/api/article-list'
import { fmtTimeStamp } from '@/utils/index'

export default {
  components: {
    Card,
  },
  data() {
    return {
      token: '',
      search: '',
      dataList: [],
      total: 0,
      fmtTimeStamp
    }
  },
  onShow() {
    this.token = wx.getStorageSync('token');
  },
  onLoad() {
    this.getDataList()
  },
  methods: {
    async getDataList() {
      const res = await articleList({
        page: 1,
        page_size: 10
      })

      if (res.code === 200) {
        this.dataList = res.data.item
        this.total = res.total_count
      }
    }
  },
  onReachBottom() {

  }
}
</script>


<style lang="less" scoped>
.list-wrap {
  width: 100%;
  min-height: 100vh;
  background: #F4F4F4;
  padding: 0px 15px;
  padding-top: 20px;
  padding-bottom: 90px;
  box-sizing: border-box;
}
.input {
  height: 44px;
  width: 100%;
  border-radius: 44px;
  background: #fff;
  font-size: 16px;
  padding: 0 16px;
  box-sizing: border-box;
}

.list-box {
  margin-top: 16px;
}
</style>